<template>
  <div class="w" v-if="show">
    <div class="top">
      <div class="top_back" @click="back">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <div class="top_img">
        <el-image :src="categoryList[index].dishDtoList[ind].dishImage" fit="cover"></el-image>
      </div>
      <div class="top_header">
        <div class="header_top">
          <div class="header_top_left">
            <div class="left_title">
              <span>{{ categoryList[index].dishDtoList[ind].dishName }}</span>
            </div>
            <div class="left_tag"><span>1杯</span></div>
            <div class="left_sale">
              <span>月售{{ categoryList[index].dishDtoList[ind].sales }}</span>
            </div>
          </div>
          <div class="header_top_right">
            <span><i class="iconfont icon-shoucang"></i></span>
            <span>收藏</span>
          </div>
        </div>
        <div class="header_bottom">
          <div class="header_bottom_left">
            <div class="left_dishPrice">
              <span class="oldPrice_icon">￥</span>
              <span class="oldPrice_info">{{ categoryList[index].dishDtoList[ind].dishPrice }}</span>
            </div>
            <div class="left_oldPrice" v-if="categoryList[index].dishDtoList[ind].oldPrice != null">
              <span>￥</span>
              <span>{{ categoryList[index].dishDtoList[ind].oldPrice }}</span>
            </div>
          </div>
          <div class="header_bottom_right">
            <div class="right_button" v-if="categoryList[index].dishDtoList[ind].dishFlavore.length != 0">
              <div
                class="right_button_1"
                @click="addShop()"
                v-if="categoryList[index].dishDtoList[ind].chooseNumber == 0 || categoryList[index].dishDtoList[ind].chooseNumber == null"
              >
                <span>选规格</span>
              </div>
              <div
                v-if="categoryList[index].dishDtoList[ind].chooseNumber != 0 && categoryList[index].dishDtoList[ind].chooseNumber != null"
                class="right_button_2"
              >
                <i class="iconfont icon-jianshao" @click="decrease(categoryList[index].dishDtoList[ind])"></i>
                <span>{{ categoryList[index].dishDtoList[ind].chooseNumber }}</span>
                <i class="iconfont icon-tianjia1 icon" @click="add($event, categoryList[index].dishDtoList[ind])" ref="addRef"></i>
              </div>
            </div>
            <div class="right_count" v-if="categoryList[index].dishDtoList[ind].dishFlavore.length == 0">
              <i
                v-if="categoryList[index].dishDtoList[ind].chooseNumber != 0 && categoryList[index].dishDtoList[ind].chooseNumber != null"
                class="iconfont icon-jianshao"
                @click="decrease(categoryList[index].dishDtoList[ind])"
              ></i>
              <span v-if="categoryList[index].dishDtoList[ind].chooseNumber != 0 && categoryList[index].dishDtoList[ind].chooseNumber != null">{{
                categoryList[index].dishDtoList[ind].chooseNumber
              }}</span>
              <i class="iconfont icon-tianjia1 icon" @click="add($event, categoryList[index].dishDtoList[ind])" ref="addRef"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom_description">
        <div class="bottom_title">
          <span>详情</span>
          <div></div>
        </div>
        <div class="bottom_info">
          <div class="info_left">
            <span>掌柜描述:</span>
          </div>
          <div class="info_right">
            <span>{{ categoryList[index].dishDtoList[ind].dishText }}</span>
          </div>
        </div>
      </div>
      <div class="bottom_dishRate">
        <div class="bottom_title">
          <span>评价</span>
          <div></div>
        </div>
        <div class="dishRate_info">
          <div class="info_rate" v-for="(item, index) in rateList" :key="index">
            <div class="rate_user">
              <div class="user_left">
                <img src="../../img/匿名头像.jpg" alt="" v-if="item.isHide == 1" />
                <el-image :src="item.user.avatar" fit="cover" v-if="item.isHide == 0"></el-image>
              </div>
              <div class="user_right">
                <div class="right_name" v-if="item.isHide == 0">{{ item.user.name }}</div>
                <div class="right_name" v-if="item.isHide == 1">匿名用户</div>
                <div class="right_date">{{ item.rateTime }}</div>
              </div>
            </div>
            <div class="rate_text">
              <div class="text_score">
                <el-rate v-model="item.rateScore" show-text text-color="#ff9900" :texts="texts" disabled></el-rate>
              </div>
              <div class="text_info">{{ item.rateText }}</div>
              <div class="text_img" v-if="item.rateImgList.length != 0">
                <el-image :src="it.rateImage" fit="cover" v-for="(it, ind) in item.rateImgList" :key="ind"></el-image>
              </div>
              <div class="text_return" v-if="item.rateReturn != '' && item.rateReturn != null">
                <div class="return_title">商家回复</div>
                <div class="return_text">{{ item.rateReturn }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cart" ref="cartRef">
      <div class="cart_left" @click="showShppingCart = true">
        <el-badge :value="shoppingCartTatal" class="item" v-if="shoppingCartTatal != 0"></el-badge>
        <img src="../../img/cart.png" alt="" v-if="shoppingCartTatal == 0" />
        <img src="../../img/cart_active.png" alt="" v-if="shoppingCartTatal != 0" />
      </div>
      <div class="cart_middle" @click="showShppingCart = true">
        <div class="middle_top">
          <span>￥{{ totalPrice }}</span>
        </div>
        <div class="middle_bottom">
          <span>另需配送费￥4</span>
        </div>
      </div>
      <div class="cart_right">
        <div class="right" v-if="!showOrder">
          <span>差￥{{ difference }}起送</span>
        </div>
        <div class="right_active" v-if="showOrder" @click="placeOrders">
          <span>去下单</span>
        </div>
      </div>
    </div>
    <div class="dialog" v-if="addDiolog">
      <div class="el-dialog">
        <el-dialog :show-close="false" :title="categoryList[index].dishDtoList[ind].dishName" :visible.sync="addDiolog" width="350px">
          <div class="dialog_item" v-for="(item, index) in categoryList[index].dishDtoList[ind].dishFlavore" :key="index">
            <div>
              <div class="dialog_item_title">
                <span>{{ item.name }}</span>
              </div>
              <div class="dialog_item_info">
                <div
                  @click="tagClick(it, index, $event, ind)"
                  v-for="(it, ind) in item.value"
                  :key="ind"
                  :class="subIndex[index] == ind ? 'info_tag_active' : 'info_tag'"
                >
                  <el-tag>{{ it }}</el-tag>
                </div>
              </div>
            </div>
          </div>
          <div slot="footer" class="footer">
            <div class="footer_price">
              <span class="span_1">总计</span>
              <span class="span_2">￥</span>
              <span
                class="span_3"
                v-if="categoryList[index].dishDtoList[ind].amount == 0 || categoryList[index].dishDtoList[ind].chooseNumber == null"
                >{{ categoryList[index].dishDtoList[ind].dishPrice }}</span
              >
              <span
                class="span_3"
                v-if="categoryList[index].dishDtoList[ind].amount != 0 && categoryList[index].dishDtoList[ind].chooseNumber != null"
                >{{ categoryList[index].dishDtoList[ind].amount }}</span
              >
            </div>
            <div class="footer_button">
              <div
                class="footer_button_1"
                @click="add($event, categoryList[index].dishDtoList[ind])"
                v-if="categoryList[index].dishDtoList[ind].chooseNumber == 0 || categoryList[index].dishDtoList[ind].chooseNumber == null"
              >
                <span>+</span>
                <span>加入购物车</span>
              </div>
              <div
                class="footer_button_2"
                v-if="categoryList[index].dishDtoList[ind].chooseNumber != 0 && categoryList[index].dishDtoList[ind].chooseNumber != null"
              >
                <i class="iconfont icon-jianshao" @click="decrease(categoryList[index].dishDtoList[ind])"></i>
                <span>{{ categoryList[index].dishDtoList[ind].chooseNumber }}</span>
                <i class="iconfont icon-tianjia1 icon" @click="add($event, categoryList[index].dishDtoList[ind])" ref="addRef"></i>
              </div>
            </div>
            <div class="close" @click="closeDialog">
              <span>×</span>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
    <div class="shoppingCart" v-if="showShppingCart">
      <div class="shoppingCart_top" @click="closeShoppingCart"></div>
      <div class="shoppingCart_bottom">
        <div class="bottom_top"></div>
        <div class="bottom_bottom">
          <div class="bottom_middle">
            <div class="middle_left">
              <span>购物车</span>
            </div>
            <div class="middle_right" @click="delShoppingCart">
              <i class="iconfont icon-shanchu"></i>
              <span>清空购物车</span>
            </div>
          </div>
          <div class="bottom_info">
            <div class="info_item" v-for="(item, index) in shoppingCartList" :key="index">
              <div class="item_left">
                <el-image :src="item.dishImage" fit="cover"></el-image>
              </div>
              <div class="item_right">
                <div class="item_right_title">
                  <span>{{ item.dishName }}</span>
                </div>
                <div class="item_right_flavore">
                  <span v-for="(it, ind) in item.flavore" :key="ind">{{ it }}</span>
                </div>
                <div class="item_right_price">
                  <span class="amountPrice">￥{{ item.amount }}</span>
                </div>
                <div class="item_right_count">
                  <i class="iconfont icon-jianshao" @click="decrease(item)"></i>
                  <span>{{ item.chooseNumber }}</span>
                  <i class="iconfont icon-tianjia1 icon" @click="add($event, item)" ref="addRef"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let shopInfo = '';
let url = '';
export default {
  data() {
    return {
      dishInfo: [],
      shoppingCartTatal: 0,
      showShppingCart: false,
      totalPrice: 0,
      showOrder: false,
      difference: 0,
      addDiolog: false,
      selectArr: [],
      subIndex: [],
      shoppingCartList: [],
      categoryList: [],
      shopInfo: [],
      index: 0,
      ind: 0,
      info: [],
      show: false,
      shoppingCartParams: [],
      rateList: [],
      texts: ['非常差', '差', '一般', '满意', '非常满意'],
    };
  },
  beforeRouteEnter(to, from, next) {
    url = from.name;
    shopInfo = from.params.shopInfo;
    next();
  },
  created() {
    this.shopInfo = this.$route.query.shopInfo;
    if (url == 'pay') {
      this.shopInfo = shopInfo;
    }
    this.index = this.$route.query.index;
    this.ind = this.$route.query.ind;
    this.info = JSON.parse(window.localStorage.getItem('userInfo'));
    this.getCategoryList();
    this.difference = Math.abs(Math.formatFloat(this.totalPrice - this.shopInfo.start, 2));
    setTimeout(() => {
      this.getRateList();
    }, 100);
  },

  methods: {
    async getRateList() {
      var getParams = { shopId: '', dishId: this.categoryList[this.index].dishDtoList[this.ind].id };
      const { data: res } = await this.$http.get('rate/getAllRate', { params: getParams });
      if (res.code == 1) {
        this.rateList = res.data;
      } else {
        return this.$message.error('评价信息获取失败');
      }
    },
    async placeOrders() {
      for (let i = 0; i < this.shoppingCartList.length; i++) {
        this.shoppingCartParams.push({
          dishId: this.shoppingCartList[i].id,
          flavore: this.shoppingCartList[i].flavore,
          number: this.shoppingCartList[i].chooseNumber,
          amount: this.shoppingCartList[i].amount,
          userId: this.info.id,
          shopId: this.shoppingCartList[i].shopId,
          dishName: this.shoppingCartList[i].dishName,
          dishImage: this.shoppingCartList[i].dishImage,
          oldPrice: this.shoppingCartList[i].oldPrice,
        });
      }
      const { data: res } = await this.$http.post('shoppingCart/addShoppingCart', this.shoppingCartParams);
      if (res.code == 1) {
        this.updateRedis();
        this.$router.push({ path: '/pay', query: { shopInfo: this.shopInfo } });
      }
    },
    async getCategoryList() {
      const { data: res } = await this.$http.get(
        `http://localhost:8080/school/category/getByShopId?shopId=${this.shopInfo.id}&userId=${this.info.id}`,
      );
      if (res.code == 1) {
        this.categoryList = res.data;
        this.show = true;
        for (let i = 0; i < this.categoryList.length; i++) {
          for (let j = 0; j < this.categoryList[i].dishDtoList.length; j++) {
            if (this.categoryList[i].dishDtoList[j].chooseNumber != 0 && this.categoryList[i].dishDtoList[j].chooseNumber != null) {
              this.getTotal(i);
              this.getTotalPrice();
              this.getOrderPrice();
              this.pushShoppingCart(this.categoryList[i].dishDtoList[j]);
            }
            for (let k = 0; k < this.categoryList[i].dishDtoList[j].dishFlavore.length; k++) {
              this.categoryList[i].dishDtoList[j].dishFlavore[k].value = JSON.parse(this.categoryList[i].dishDtoList[j].dishFlavore[k].value);
            }
          }
        }
        return;
      } else {
        return this.$message.error('信息获取失败');
      }
    },
    updateRedis() {
      for (let i = 0; i < this.categoryList.length; i++) {
        for (let j = 0; j < this.categoryList[i].dishDtoList.length; j++) {
          for (let k = 0; k < this.categoryList[i].dishDtoList[j].dishFlavore.length; k++) {
            this.categoryList[i].dishDtoList[j].dishFlavore[k].value = JSON.stringify(this.categoryList[i].dishDtoList[j].dishFlavore[k].value);
          }
        }
      }
      this.$http.put('shoppingCart/updateRedis', this.categoryList);
      for (let i = 0; i < this.categoryList.length; i++) {
        for (let j = 0; j < this.categoryList[i].dishDtoList.length; j++) {
          for (let k = 0; k < this.categoryList[i].dishDtoList[j].dishFlavore.length; k++) {
            this.categoryList[i].dishDtoList[j].dishFlavore[k].value = JSON.parse(this.categoryList[i].dishDtoList[j].dishFlavore[k].value);
          }
        }
      }
    },
    back() {
      this.updateRedis();
      setTimeout(() => {
        this.$router.push({ path: '/shop', query: { shopId: this.shopInfo.id } });
      }, 100);
    },
    delShoppingCart() {
      this.shoppingCartList.length = 0;
      this.showShppingCart = false;
      for (let i = 0; i < this.categoryList.length; i++) {
        this.categoryList[i].total = 0;
        for (let j = 0; j < this.categoryList[i].dishDtoList.length; j++) {
          this.categoryList[i].dishDtoList[j].chooseNumber = null;
          this.categoryList[i].dishDtoList[j].amount = null;
          this.categoryList[i].dishDtoList[j].flavore = null;
        }
      }
      this.shoppingCartTatal = 0;
      this.totalPrice = 0;
      this.showOrder = false;
      this.difference = Math.abs(Math.formatFloat(this.totalPrice - this.shopInfo.start, 2));
      this.$http.delete(`http://localhost:8080/school/shoppingCart/delShoppingCart?shopId=${this.shopInfo.id}&userId=${this.info.id}`);
      this.updateRedis();
    },
    closeShoppingCart() {
      this.showShppingCart = false;
    },
    addShop() {
      this.addDiolog = true;
    },
    add(e, dishDtoInfo) {
      const car = document.querySelector('.cart');
      const btn = e.target;
      const w = document.querySelector('.w');
      const PLUS_SIZE = 25;
      const div = document.createElement('div');
      div.className = 'plus';
      div.innerHTML = `<i class="iconfont icon-tianjia1"></i>`;
      const btnRect = btn.getBoundingClientRect();
      const carRect = car.getBoundingClientRect();
      const left = btnRect.left;
      const top = btnRect.top - 22;
      const x = carRect.left + carRect.width / 5 - PLUS_SIZE / 2 - left;
      const y = carRect.top - top - 10;
      div.style.setProperty('--left', `${left}px`);
      div.style.setProperty('--top', `${top}px`);
      div.style.setProperty('--x', `${x}px`);
      div.style.setProperty('--y', `${y}px`);
      div.addEventListener('animationend', () => {
        div.remove();
      });
      w.appendChild(div);
      this.increase(dishDtoInfo);
    },
    increase(dishDtoInfo) {
      for (let i = 0; i < this.categoryList.length; i++) {
        for (let j = 0; j < this.categoryList[i].dishDtoList.length; j++) {
          if (this.categoryList[i].dishDtoList[j].id == dishDtoInfo.id) {
            this.categoryList[i].dishDtoList[j].chooseNumber++;
            if (this.selectArr.length != 0) {
              this.categoryList[i].dishDtoList[j].flavore = JSON.parse(JSON.stringify(this.selectArr.join('、')));
            }
            this.getAmountPrice(i, j);
            this.getTotal(i);
            this.getTotalPrice();
            this.pushShoppingCart(this.categoryList[i].dishDtoList[j]);
            this.getOrderPrice();
            this.$forceUpdate();
          }
        }
      }
    },
    decrease(dishDtoInfo) {
      for (let i = 0; i < this.categoryList.length; i++) {
        for (let j = 0; j < this.categoryList[i].dishDtoList.length; j++) {
          if (this.categoryList[i].dishDtoList[j].id == dishDtoInfo.id) {
            this.categoryList[i].dishDtoList[j].chooseNumber--;
            this.getAmountPrice(i, j);
            this.getTotal(i);
            this.getTotalPrice();
            this.pushShoppingCart(this.categoryList[i].dishDtoList[j]);
            this.getOrderPrice();
            this.$forceUpdate();
          }
        }
      }
    },
    getOrderPrice() {
      if (this.totalPrice >= this.shopInfo.start) {
        this.showOrder = true;
      } else {
        this.showOrder = false;
      }
      this.difference = Math.abs(Math.formatFloat(this.totalPrice - this.shopInfo.start, 2));
    },
    pushShoppingCart(dishDtoInfo) {
      var flag = false;
      if (this.shoppingCartList.length == 0) {
        this.shoppingCartList.push(dishDtoInfo);
      }
      for (let i = 0; i < this.shoppingCartList.length; i++) {
        if (this.shoppingCartList[i].id == dishDtoInfo.id) {
          this.shoppingCartList[i] = dishDtoInfo;
          if (this.shoppingCartList[i].chooseNumber == 0) {
            this.shoppingCartList.splice(i, 1);
          }
          if (this.shoppingCartList.length == 0) {
            this.showShppingCart = false;
          }
          flag = false;
          return flag;
        } else {
          flag = true;
        }
      }
      if (flag) {
        this.shoppingCartList.push(dishDtoInfo);
      }
    },
    getTotalPrice() {
      var sum = 0;
      for (let i = 0; i < this.categoryList.length; i++) {
        for (let j = 0; j < this.categoryList[i].dishDtoList.length; j++) {
          sum = sum + this.categoryList[i].dishDtoList[j].amount;
        }
      }
      this.totalPrice = Math.formatFloat(sum, 2);
    },
    getTotal(i) {
      var sum = 0;
      var sum1 = 0;
      for (let j = 0; j < this.categoryList[i].dishDtoList.length; j++) {
        sum = sum + this.categoryList[i].dishDtoList[j].chooseNumber;
      }
      this.categoryList[i].total = sum;
      for (let i = 0; i < this.categoryList.length; i++) {
        sum1 = sum1 + this.categoryList[i].total;
      }
      this.shoppingCartTatal = sum1;
    },
    getAmountPrice(i, j) {
      this.categoryList[i].dishDtoList[j].amount = Math.formatFloat(
        this.categoryList[i].dishDtoList[j].chooseNumber * this.categoryList[i].dishDtoList[j].dishPrice,
        2,
      );
    },
    tagClick(it, index, event, ind) {
      if (this.selectArr[index] !== it) {
        this.selectArr[index] = it;
        this.subIndex[index] = ind;
      } else {
        this.selectArr[index] = '';
        this.subIndex[index] = -1;
      }
      this.checkItem();
    },
    checkItem() {
      var option = this.dishInfo.dishFlavore;
      var result = [];
      for (let i in option) {
        result[i] = this.selectArr[i] ? this.selectArr[i] : '';
      }
      for (let i in option) {
        var last = result[i];
        for (let k in option[i].item) {
          result[i] = option[i].item[k].name;
        }
        result[i] = last;
      }
      this.$forceUpdate();
    },
    closeDialog() {
      this.addDiolog = false;
      this.selectArr.length = 0;
      this.subIndex.length = 0;
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  height: 100vh;
  width: 100%;
  background-color: #f4f4f4;
  position: relative;
  .top {
    background-color: #fefefe;
    position: relative;
    .top_back {
      border-radius: 50px;
      height: 30px;
      width: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #7d7d7d;
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 9;
      .icon-fanhui {
        font-size: 20px;
        color: #e3e3e3;
      }
    }
    .top_img {
      height: 290px;
      width: 395px;
      :deep(.el-image) {
        height: 100%;
        width: 100%;
      }
    }
    .top_header {
      padding: 15px;
      .header_top {
        display: flex;
        justify-content: space-between;
        .header_top_left {
          .left_title {
            font-size: 20px;
            margin-bottom: 10px;
            color: #31302c;
            letter-spacing: 2px;
            font-weight: bold;
          }
          .left_tag {
            padding: 2px;
            border-radius: 5px;
            background-color: #f4f4f4;
            width: 25px;
            font-size: 10px;
            letter-spacing: 2px;
          }
          .left_sale {
            font-size: 12px;
            color: #a6a6a8;
            margin-top: 10px;
          }
        }
        .header_top_right {
          text-align: center;
          .icon-shoucang {
            display: block;
            font-size: 20px;
            color: #2b2e2e;
          }
          span {
            font-size: 12px;
            color: #a9a9a9;
          }
        }
      }
      .header_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header_bottom_left {
          display: flex;
          align-items: center;
          .left_dishPrice {
            margin-right: 5px;
            .oldPrice_icon {
              font-size: 13px;
              color: #fb4c4a;
              font-weight: bold;
            }
            .oldPrice_info {
              font-size: 21px;
              color: #fb4c4a;
              font-weight: bold;
            }
          }
          .left_oldPrice {
            span {
              font-size: 12px;
              color: #a9a9a9;
              text-decoration: line-through;
            }
          }
        }
        .header_bottom_right {
          .right_button {
            .right_button_1 {
              background-color: #fede44;
              font-size: 13px;
              padding: 4px 8px 4px 8px;
              border-radius: 10px;
              color: #0a0a0a;
            }
            .right_button_2 {
              display: flex;
              align-items: center;
              .iconfont {
                font-size: 25px;
                color: #fece45;
              }
              span {
                margin-right: 10px;
                margin-left: 10px;
              }
            }
          }
          .right_count {
            display: flex;
            align-items: center;
            .iconfont {
              font-size: 25px;
              color: #fece45;
            }
            span {
              margin-right: 5px;
              margin-left: 5px;
            }
          }
        }
      }
    }
  }
  .bottom::-webkit-scrollbar {
    display: none;
  }
  .bottom {
    margin-top: 10px;
    height: 405px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    .bottom_description {
      background-color: #fefefe;
      .bottom_title {
        border-bottom: 2px solid #f8f8f8;
        height: 40px;
        span {
          font-size: 17px;
          letter-spacing: 1px;
          color: #2c2c2c;
          line-height: 40px;
          font-weight: bold;
          margin-left: 15px;
        }
        div {
          border: 2px solid #fcd164;
          width: 16px;
          margin-left: 23px;
        }
      }

      .bottom_info {
        padding: 13px 18px;
        display: flex;
        .info_left {
          color: #aaa9aa;
          font-size: 15px;
          letter-spacing: 2px;
          margin-right: 25px;
        }
        .info_right {
          letter-spacing: 2px;
          span {
            display: inline-block;
            width: 255px;
            word-break: break-all;
            white-space: normal;
          }
        }
      }
    }
    .bottom_dishRate {
      background-color: #fefefe;
      margin-top: 10px;
      .bottom_title {
        border-bottom: 2px solid #f8f8f8;
        height: 40px;
        span {
          font-size: 17px;
          letter-spacing: 1px;
          color: #2c2c2c;
          line-height: 40px;
          font-weight: bold;
          margin-left: 15px;
        }
        div {
          border: 2px solid #fcd164;
          width: 16px;
          margin-left: 23px;
        }
      }
      .dishRate_info::-webkit-scrollbar {
        display: none;
      }
      .dishRate_info {
        padding: 10px;
        height: 245px;
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        .info_rate {
          margin-top: 10px;
          .rate_user {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            .user_left {
              :deep(.el-image) {
                height: 40px;
                width: 40px;
                border-radius: 50px;
                margin-right: 10px;
              }
              img {
                height: 40px;
                width: 40px;
                border-radius: 50px;
                margin-right: 10px;
              }
            }
            .user_right {
              .right_name {
                color: #000000;
                font-size: 16px;
                font-weight: bold;
              }
              .right_date {
                font-size: 13px;
                color: #b0b0b0;
                margin-bottom: 5px;
              }
            }
          }
          .rate_text {
            .text_score {
              margin-bottom: 5px;
              :deep(.el-rate__text) {
                color: #9c9c9d !important;
              }
            }
            .text_info {
              font-size: 16px;
              color: #505050;
              letter-spacing: 2px;
              margin-bottom: 5px;
            }
            .text_img {
              display: flex;
              flex-wrap: wrap;
              width: 100%;

              margin-bottom: 10px;
              :deep(.el-image) {
                height: 150px;
                width: 150px;
                border-radius: 10px;
                margin-right: 10px;
                margin-top: 5px;
              }
            }
            .text_return {
              padding: 10px;
              background-color: #f9f9f9;
              border-radius: 10px;
              .return_title {
                color: #818183;
                font-size: 15px;
                font-weight: bold;
                letter-spacing: 1px;
                margin-bottom: 5px;
              }
              .return_text {
                font-size: 14px;
                color: #818183;
                letter-spacing: 2px;
              }
            }
          }
        }
      }
    }
  }
  .cart {
    z-index: 9999;
    position: absolute;
    bottom: 20px;
    display: flex;
    align-items: center;
    background-color: #0d0b0c;
    border-radius: 50px;
    width: 350px;
    left: 20px;
    height: 60px;
    .cart_left {
      height: 80px;
      width: 82px;
      margin-left: 20px;
      margin-bottom: 18px;
      margin-right: 10px;
      position: relative;
      :deep(.el-badge) {
        position: absolute;
        right: 66px;
        top: 30px;
        .el-badge__content {
          background-color: #eb3434;
        }
      }
      img {
        height: 100%;
        width: 100%;
      }
    }
    .cart_middle {
      margin-right: 20px;
      .middle_top {
        color: #edeeed;
        font-size: 18px;
        font-weight: 600;
      }
      .middle_bottom {
        color: #959595;
        font-size: 12px;
        letter-spacing: 2px;
      }
    }
    .cart_right {
      margin-left: 20px;
      position: relative;
      flex: 1;
      .right {
        color: #959595;
        font-size: 17px;
      }
      .right_active {
        background-color: #fbc139;
        height: 61px;
        width: 100px;
        position: absolute;
        right: -1px;
        top: -31px;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
        text-align: center;
        span {
          line-height: 61px;

          color: #3b3a37;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }
  .dialog {
    .el-dialog {
      :deep(.el-dialog) {
        border-radius: 10px;
        widows: 350px;
        .el-dialog__header {
          .el-dialog__title {
            font-weight: bold;
            letter-spacing: 2px;
            font-size: 19px;
          }
        }
      }
      .dialog_item {
        margin-bottom: 40px;
        .dialog_item_title {
          color: #a9a9a9;
          font-size: 15px;
          margin-bottom: 10px;
        }
        .dialog_item_info {
          display: flex;
          flex-wrap: wrap;
          .info_tag {
            margin-right: 10px;
            width: 60px;
            :deep(.el-tag) {
              margin-right: 10px;
              border: 1px solid #f5f6f7;
              background-color: #fefefe;
              color: #343434;
              width: 60px;
              margin-bottom: 10px;
              text-align: center;
            }
          }
          .info_tag_active {
            margin-right: 10px;
            width: 60px;
            :deep(.el-tag) {
              margin-right: 10px;
              border: 1px solid #f5c28c;
              background-color: #fdfaf1;
              color: #ee8a35;
              width: 60px;
              margin-bottom: 10px;
              text-align: center;
            }
          }
        }
      }
      .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        position: relative;
        .footer_price {
          .span_1 {
            color: #070707;
            font-size: 16px;
            font-weight: bold;
            margin-right: 10px;
          }
          .span_2 {
            color: #e75e50;
            font-size: 16px;
            font-weight: bold;
          }
          .span_3 {
            color: #e75e50;
            font-size: 20px;
            font-weight: bold;
          }
        }
        .footer_button {
          .footer_button_1 {
            background-color: #f5c558;
            padding: 4px 8px;
            color: #282826;
            font-size: 16px;
            border-radius: 10px;
          }
          .footer_button_2 {
            position: absolute;
            right: 15px;
            bottom: 0px;
            display: flex;
            align-items: center;
            .iconfont {
              font-size: 25px;
              color: #fece45;
            }
            span {
              margin-right: 10px;
              margin-left: 10px;
            }
          }
        }
        .close {
          background-color: transparent;
          color: #fafafa;
          border: 2px solid #fafafa;
          height: 50px;
          width: 50px;
          border-radius: 50px;
          position: absolute;
          top: 80px;
          right: 130px;
          text-align: center;
          line-height: 45px;
          font-size: 40px;
        }
      }
    }
  }
  .shoppingCart {
    height: 844px;
    width: 100%;
    z-index: 999;
    position: absolute;
    top: 0;
    .shoppingCart_top {
      background-color: transparent;
      height: 400px;
    }
    .shoppingCart_bottom {
      background-color: #fefefe;
      height: 462px;
      border-radius: 10px;

      .bottom_top {
        height: 30px;
        background-color: #f3edd5;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
      .bottom_bottom {
        padding: 15px;
        .bottom_middle {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 2px solid #f9f4f4;
          padding-bottom: 10px;
          .middle_left {
            color: #4e4e4a;
            font-size: 17px;
          }
          .middle_right {
            color: #8b8b8b;
            font-size: 13px;
            .icon-shanchu {
              margin-right: 5px;
            }
          }
        }
        .bottom_info::-webkit-scrollbar {
          display: none;
        }
        .bottom_info {
          margin-top: 5px;
          height: 280px;
          overflow: auto;
          scrollbar-width: none;
          -ms-overflow-style: none;
          .info_item {
            display: flex;
            padding: 10px;
            align-items: center;
            .item_left {
              margin-right: 10px;
              :deep(.el-image) {
                height: 70px;
                width: 70px;
              }
            }
            .item_right {
              width: 100%;
              position: relative;
              .item_right_title {
                font-size: 17px;
                margin-bottom: 5px;
                letter-spacing: 2px;
                color: #3a3937;
              }
              .item_right_flavore {
                font-size: 12px;
                color: #8f8f8f;
                margin-bottom: 5px;
              }
              .item_right_price {
                font-size: 17px;
                color: #fd4a32;
                font-weight: bold;
                margin-bottom: 5px;
                margin-right: 10px;
              }
              .item_right_count {
                position: absolute;
                right: 0px;
                bottom: 0px;
                display: flex;
                align-items: center;
                .iconfont {
                  font-size: 25px;
                  color: #fece45;
                }
                span {
                  margin-right: 10px;
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>